<template>
	<view id="box">
		<ms-dropdown-menu>
			<ms-dropdown-item v-model="value1" :list="list" title="交易类型" class="item"></ms-dropdown-item>
			<ms-dropdown-item v-model="value2" :list="listone" title="产品" class="item"></ms-dropdown-item>
			<ms-dropdown-item v-model="value3" :list="listitem" title="状态" class="item"></ms-dropdown-item>
		</ms-dropdown-menu>



		<!-- <view>输出：{{value1}}</view>
		<view>输出：{{value2}}</view>
		<view>输出：{{value3}}</view> -->


		
			<!-- 有数据时显示 -->
			<!-- 显示订单 -->
			<view class="exclusive-item" v-for="item in memberCurrentAccounts" v-if="item.overAllBalance>0" :key="item.id" >
				<view class="item-titll">
					<view class="">{{item.codeName}}</view>
					<view class="detals"
						@tap="see(item.overAllBalance,item.todayEarnings,item.totalEarnings,item.currentCode)">查看详情 ></view>
				</view>
				<view class="itemboxs">
					<view class="last-item">
						<text class="text1-1">金额(元)</text><br>
						<text class="text1-2">{{item.overAllBalance}}</text>
					</view>
					<view class="last-item">
						<text class="text1-1">昨日收益(元)</text><br>
						<text style="color:#999999;" class="text1-2">{{item.todayEarnings}}</text>
					</view>
					<view class="last-item">
						<text class="text1-1">累计收益(元)</text><br>
						<text style="color: red;" class="text1-2">{{item.totalEarnings}}</text>
					</view>
				</view>
			</view>
			
			<!-- 没有历史记录显示 -->
			<view class="empty" v-if="istrue">
				<image src="https://z3.ax1x.com/2021/04/22/cOiY0e.png" mode="" class="empty-image"></image>
				<view class="empty-texts">暂无历史记录...</view>
			</view>



	</view>



</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapActions
	} = createNamespacedHelpers('payCurrent'); ///购买数据信息
	const {
		mapState: userMapstate
	} = createNamespacedHelpers('UserInfor')

	import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
	import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
	export default {
		components: {
			msDropdownMenu,
			msDropdownItem
		},
		async onShow() {
			const historyData = await this.getCurrentAssent({
				userName: this.userData.username
			})
			// console.log(historyData);
			this.memberCurrentAccounts = historyData.data.memberCurrentAccounts;
			if(historyData.data.sumOverAllBalance==0){
				this.istrue=true
			}
		},
		data() {
			return {
				istrue:false,
				memberCurrentAccounts: [],
				value1: '全部',
				value2: '全部',
				value3: '全部',
				list: [{
						text: '全部',
						value: '全部'
					},
					{
						text: '购买',
						value: 0
					},
					{
						text: '领取',
						value: 2
					},
					{
						text: '收益',
						value: 3
					},
					{
						text: '续投',
						value: 4
					},
					{
						text: '其他',
						value: 5
					}
				],
				listone: [{
						text: '全部',
						value: '全部'
					},
					{
						text: '活期',
						value: 1
					},
					{
						text: '定期',
						value: 0
					},
					{
						text: '基金',
						value: 3
					},
					{
						text: '黄金',
						value: 4
					}
				],
				listitem: [{
						text: '全部',
						value: '全部'
					},
					{
						text: '成功',
						value: 0
					},
					{
						text: '失败',
						value: 2
					},
					{
						text: '处理中',
						value: 3
					},
					{
						text: '撤单',
						value: 4
					}
				]
			}
		},
		computed: {
			...userMapstate(['userData'])
		},
		methods: {
			///交易记录页面
			...mapActions(['getCurrentAssent']),
			///跳转详情
			see(a, b, c, d) {
				uni.navigateTo({
					url: '/pages/currentList/currentList?overAllBalance=' + a +
						'&todayEarnings=' + b +
						'&totalEarnings=' + c +
						'&code=' + d
				})
			},

			choose() {
				let obj = {
					value: 'test是'
				}
				this.$refs.dropdownItem.choose(obj)
			},
			close() {
				this.$refs.dropdownItem.closePopup()
			}
		}
	}
</script>

<style lang="scss">
	#box {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.empty {
		width: 200rpx;
		height: 150rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.05);
		position: absolute;
		text-align: center;
		padding-top: 50rpx;
		top: 0rpx;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		margin: auto auto;
	}

	.empty-texts {
		font-size: 28rpx;
		margin-top: 60rpx;
		color: rgba(0, 0, 0, 0.5);
	}

	.empty-image {
		width: 100rpx;
		height: 100rpx;
		margin: 0rpx auto;
	}

	.item {
		width: 100%;
		color: rgba(0, 0, 0, 0.6);
		font-size: 30rpx;
	}

	.dropdown-item-content {
		padding: 20rpx;

		.btn {
			background: $uni-color-primary;
			background: #007aff;
			color: #fff;
			padding: 20rpx;
			display: inline-block;
			border-radius: 10rpx;
		}
	}

	/* 产品详情 */
	/* 购买产品 */
	.exclusive-item {
		width: 700rpx;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.06);
		padding: 20rpx;
		border-radius: 24rpx;
		margin: 10rpx auto;
	}

	.itemboxs {
		width: 100%;
	}

	.item-titll {
		width: 100%;
		margin: 0rpx auto 20rpx;
		/* border: 1px solid red; */
		font-size: 28rpx;
		color: #333333;
		font-family: PingFang SC;
		display: flex;
		justify-content: space-between;
	}

	.detals {
		width: 150rpx;
		background-color: #EBEEF5;
		text-align: center;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.none {
		padding-top: 20rpx;
		padding-left: 40rpx;
		border-top: 2rpx solid #999999;
	}

	.itemboxs {
		width: 100%;
		margin: 0rpx auto;
		/* border: 1px solid red; */
		display: flex;
	}

	.last-item {
		width: 100%;
		/* border: 1px solid red; */
		text-align: center;
	}

	.text1-1 {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #666666;
	}

	.text1-2 {
		font-size: 24rpx;
		color: #333333;
	}
</style>
